<template>
  <div class="container">
    <el-menu
        class="menu"
        default-active="1"
        mode="vertical"
        @select="handleSelect"
        background-color="#f5f5f5"
        text-color="#333"
        active-text-color="#409EFF"
        :default-active="activeIndex"
        router>
      <el-menu-item index="/index/personal-blog/userBasicInfo">个人信息</el-menu-item>
      <el-menu-item index="/index/personal-blog/articleManage">文章管理</el-menu-item>
      <el-menu-item index="/index/personal-blog/articleLike">我的喜欢</el-menu-item>
      <el-menu-item index="/index/personal-blog/articleStar">我的收藏</el-menu-item>
      <el-menu-item index="/index/personal-blog/articleFollowing">我的关注</el-menu-item>
      <el-menu-item index="/index/personal-blog/articleFollower">粉丝列表</el-menu-item>
    </el-menu>
    <div class="content">
      <!-- 右侧空白区域，可用于放置具体内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PersonalBlog',
  mounted() {
    // this.$router.push(this.activeIndex)
  },
  watch: {
    // 监听路由变化 改变菜单选中项
    $route(to, from) {
      this.activeIndex = to.path;
    }
  },
  data() {return {
    activeIndex:'/index/personal-blog/userBasicInfo'
  }},
  methods: {
    /**
     * 菜单项被选中时触发的回调函数
     * @param key
     * @param keyPath
     */
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  height: 800px;
  /*background-color: rgba(160, 195, 255, 0.6);*/
}
.menu {
  width: 100px;
  border: 1px solid #ccc;
  margin-right: 1px;
}
.content {
  flex: 1;
  border: 1px solid #ccc;
  width: 100%;
}
</style>